<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 
<title>{$loupan['title']}</title>
<script type="text/javascript">
document.write('<div id="load-layer"><div id="loading"></div></div>');
window.onload=function(){
	var load = document.getElementById("load-layer");
	load.parentNode.removeChild(load);
}
</script>
<link rel="stylesheet" type="text/css" href="./source/modules/broke/style/css/swiper.css">
<link rel="stylesheet" type="text/css" href="./source/modules/broke/style/css/index.css?ver=9181">
<link type="text/css" rel="stylesheet" href="./source/modules/broke/style/css/manimation.css" />
<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>

<style>
.input, .select {
	width: 100%;
	height: 24px;
	background: #fff;
	border: 0 none;
	box-shadow: 0 1px 1px rgba(0,0,0,.1);
	text-indent: 8px;
	padding: 8px 0;
	font-size: 14px;
	line-height: 24px;
	-webkit-appearance: none;
}
input, img {
	vertical-align: middle;
}
.rb-row {
	margin: 12px 20px;;
}
.subbtn {
	display: inline-block;
	width: 100%;
	height: 40px;
	background: #e72100;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	border: 0 none;
	text-align: center;
	line-height: 40px;
}
/*弹出提示*/
.pop_tips{position:fixed;z-index:300;left:50%;top:20%;width:255px;overflow:hidden;margin-left:-122px;background-color:#fbfbfb;font-size:14px;text-align:center;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.3);}
.pop_show h4{height:34px;font-size:16px;border-bottom:1px solid #ededed;line-height:34px;color:#252e32;}
.pop_show .pop_info{font-size:16px;padding:20px 0;background-color:#fff;}
.pop_show .pop_btns{text-align:center;display:-webkit-box;}
.pop_show .pop_btns a{-webkit-box-flex:1;display:block;font-weight:700;height:40px;line-height:40px;border-top:1px solid #e2e1e0;-webkit-box-shadow:0 1px 1px #fff inset;}
.pop_show .pop_btns a:last-child{border-left:1px solid #e2e1e0;-webkit-box-shadow:1px 0 1px #fff inset;}
.pop_photo{position:fixed;z-index:300;width:100%;text-align:center;}
.pop_photo .photo{text-align:center;}
.pop_photo .info{position:fixed;z-index:300;bottom:0;left:0;width:100%;background-color:rgba(0,0,0,0.7);text-align:center;color:#FFF;line-height:30px;}
.pop_photo .info .con{width:280px;margin:0 auto;text-align:left;padding:6px 0 5px 0;}
.pop_photo .info h3{font-size:16px;font-weight:normal;line-height:16px;}
.pop_photo .info p{font-size:12px;color:#b8b8b8;line-height:16px;}
.rb-row	a{
text-decoration:none;
}
.fl{
text-align:left;
}
</style>
</head>
<body>
{if (($loupan['open'])&&($loupan['ostyle']==1))}
<div id="mas">
	<canvas id="cas" ></canvas>
</div>  
{/if}
<div class="swiper-container">
	<!--音乐控制-->
	<div class="audio-controls on"></div>
	<!-- 滑动操作指示 -->
	<div class="start"><strong></strong></div>
	<!-- 主体 -->
	<div class="swiper-wrapper">
		{php $i = 0;}
		{php $vv=count($result['list'])-1;}
		{loop $result['list'] $row}
		{php $i++}
		<div class="swiper-slide slide{$i} a{$vv}" style="background: url('{$_W['attachurl']}{$row['attachment']}') no-repeat center center; background-size: 100% 100%;" {if !empty($row['url'])}onclick="javascript:window.location.href='{$row['url']}'"{/if}>
			{loop $row['items'] $item}
			{if ($item['type']==0)}
			{php $size = GetImageSize($_W['attachurl'].$item['item']);}
			<div class="{$item['animation']}" style="height:{php echo $size[1]/10.08}%;width:{php echo $size[0]/6.4}%;top:{php echo $item['y']/10.08}%;left:{php echo $item['x']/6.40}%;">{if  $item['url']}<a href="{$item['url']}"><img src="{$_W['attachurl']}{$item['item']}" style="width:100%;height:100%;"/></a>{else}<img src="{$_W['attachurl']}{$item['item']}" style="width:100%;height:100%;"/>{/if}</div>
			{/if}
			{/loop}
		</div>
		
		{/loop}
		{if !empty($loupan['addr'])}
		{php $i++}
<div class="swiper-slide slide{$i}"  >
				<div class="map_area" style="width:100%">
					<a href="http://api.map.baidu.com/marker?location={$loupan['lat']},{$loupan['lng']}&title={$loupan['title']}&content={$loupan['addr']}&output=html&src=weiba|weiweb">
					<img id="mapImg" title="{$loupan['addr']}" alt="{$loupan['addr']}"
						src=""
						style="background:url(http://api.map.baidu.com/staticimage?center={$loupan['lng']},{$loupan['lat']}&zoom=12&markers={$loupan['lng']},{$loupan['lat']}&width=600&height=300&markerStyles=m,) no-repeat center;width:100%;height:200px;">
						</a>
						
						<div style="color:#333;width:100%;z-index:100000;">
							<p class="rb-row fl">{$loupan['content']}</p>
							<p class="rb-row fl">联系地址:{$loupan['addr']}</p>
						
							<p class="rb-row"><a href="{php echo $this->createMobileurl('yuyue',array('id'=>$id))}" class="subbtn"/><i class="icon-phone"></i>预约</a></p>
							<p class="rb-row"><a href="tel:{$loupan['tel']}" class="subbtn"/><i class="icon-angle-right"></i>{$loupan['tel']}</a></p>
						</div>
				</div>
		</div> 

		
				
				
		{/if}		
	</div>
</div>
{if !empty($loupan['music'])}
<!-- 背景音乐 -->
<audio id="audio" {if $loupan['mauto']}autoplay="autoplay"{/if} {if $loupan['mloop']}loop="loop"{/if}>
	<source src="{$loupan['music']}" type="audio/mpeg" />
</audio>
{/if}

<script src="./source/modules/broke/style/js/swiper.min.js"></script>
	

{if (($loupan['open'])&&($loupan['ostyle']==1))}
<!-- 手指擦除效果 -->
<script src="./source/modules/broke/style/js/tapclip.min.js"></script>
<script type="text/javascript">
	var canvas = document.getElementById("cas"),ctx = canvas.getContext("2d");
	var x1,y1,a=30,timeout,totimes = 100,jiange = 30;
	canvas.width = document.getElementById("mas").clientWidth;
	canvas.height = document.getElementById("mas").clientHeight;
	var img = new Image();
	img.src = "{$_W['attachurl']}{$loupan['open']}";
	img.onload = function(){
		ctx.drawImage(img,0,0,canvas.width,canvas.height)
		tapClip()
	}
</script>
{/if}
<script type="text/javascript">
$(function(){
	var bgurl = 'http://api.map.baidu.com/staticimage?center={$loupan['lng']},{$loupan['lat']}&zoom=12&markers={$loupan['lng']},{$loupan['lat']}&width=600&height=300&markerStyles=m,';
	var aa=$(window).width()/2;
	var bb=$(window).width();
	//alert(aa);
	//$('#mapImg').css('width',bb);
	//$('#mapImg').css('height',aa);
	//bgurl = bgurl.replace('width=600','width='+bb);
	//bgurl = bgurl.replace('height=600','height=300');
	$('#mapImg').css('backgroundImage','url('+bgurl+')');
	$('#mapImg').css('background-position','center');
	
});
	<!-- 滑动 -->
	var mySwiper = new Swiper('.swiper-container',{
		loop:{$loupan['isloop']},
		mode:'vertical',
		tdFlow: {
			rotate :0,
			depth: 0,
		}
	})
	<!-- 音频暂停播放 -->
	var audioAuto = document.getElementById('audio');
	{if $loupan['mauto']}
	audioAuto.play();
	{else}
	$(".audio-controls").removeClass("on");
	{/if}
	$(".audio-controls").click(function (){ 
		if (audioAuto.paused) {
			audioAuto.play();
			$(".audio-controls").addClass("on");
			}
			else {
			audioAuto.pause();
			$(".audio-controls").removeClass("on");
			}
	})
</script>
<!-- 微信分享设置 -->
<script src="./source/modules/broke/style/js/wx.js"></script>
<script type="text/javascript">

WeixinApi.ready(function(Api) {
        Api.showOptionMenu();
        var wxData = {
            
			"imgUrl" : '{$_W['attachurl']}{$loupan['icon']}',
			"link" : '{php echo $_W['siteroot'].$this->createMobileUrl('loupan',array('id'=>$id, 'lid'=>$lid))}',
			"desc" : '{$loupan['content']}',
			"title" : '{$loupan['title']}'
        };
        // 分享的回调
        var wxCallbacks = {
            // 分享被用户自动取消
            cancel : function(resp) {
                alert("分享后获得积分,还有可能得到佣金哦!不要错过发大财的机会!");
            },
            // 分享失败了
            fail : function(resp) {
                alert("分享失败，可能是网络问题，一会儿再试试？");
            },
            // 分享成功
            confirm : function(resp) {
				$.getJSON("{php echo $this->createMobileUrl('loupan', array('op'=>'add', 'lid'=>$lid))}&r="+new Date().getTime(),function(res){
				});
				alert("分享后成功,等着收佣金吧!");
            },
        };
        Api.shareToFriend(wxData,wxCallbacks);
        Api.shareToTimeline(wxData,wxCallbacks);
        Api.shareToWeibo(wxData,wxCallbacks);
    });

</script>
</body>
</html>